<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE>功能管理</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="${path }/resource/zTree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="${path }/resource/zTree/css/metroStyle/metroStyle.css" type="text/css">
	<script type="text/javascript" src="${path }/resource/js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="${path }/resource/layer/layer.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.exedit.js"></script>
	<SCRIPT type="text/javascript">
	var zTree;
	//创建树型结构
	function createTree() {
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				drag: {
					autoExpandTrigger: true,
					prev: true,
					inner: true,
					next: true
				},
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: true,
				showRenameBtn: true 
			},
			  async: {
		            enable: true,//设置是否异步加载
		            url:"${path}/developer/fun/all"
		        },
			data: {
				simpleData: {
					enable: true,
					pIdKey: "pId",
	                idKey: "id"
				},
				key: {
                    checked: "CHECKED",
                    name:"name",
                    url:"url"
                }
			},
			callback: {
				onDrop: onDrop,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename,
				onClick: onClick
			}
		};
		  zTree = $.fn.zTree.init($("#treeDemo"), setting);   
		  zTree.expandAll(true);
	}
	function onClick(e, treeId, treeNode) {
	//把选择的节点的数据展示在文本框
	$("#url").val(treeNode.url);
	$("#id").val(treeNode.id);
	}
		/*把选中的id展示在文本框  */
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}
		function onRemove(e, treeId, treeNode) {
			console.log("删除"+treeNode.id);
			$.ajax({
		  		'type':'post',
		  		'url':"${path}/developer/fun/del",
		  		'data':{keys : treeNode.id},
		  		'dataType':'json',
		  		'success':function(data,status){
		  			layer.alert('删除成功!', {
						  icon: 1
						});
		  		}
		  	}); 
			//发ajax请求删除当前id数据
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			alert("修改成功前 ");
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					console.log("节点名称不能为空.");
				}, 0);
				return false;
			}
			console.log(treeNode);
			className = (className === "dark" ? "":"dark");
			   layer.prompt({title: '输入url，并确认', formType: 2}, function(url, index){
         	   layer.close(index);
         	   treeNode.url=url;
         	   zTree.updateNode(treeNode);
         	  var data = {"id":treeNode.id,"name":treeNode.name,"url":treeNode.url};
  			  $.ajax({
  		  		'type':'post',
  		  		'url':"${path}/developer/fun/addOrModify",
  		  		'data':data,
  		  		'dataType':'json',
  		  		'success':function(data,status){
  		  			layer.alert('修改成功', {
  						  icon: 1
  						});
  		  		}
  		  	});   
         	  });
			return true;
		}
		/*名称修改成功回调函数  */
		function onRename(e, treeId, treeNode, isCancel) {
			//拿到id和名称发送ajx请求修改数据
			var data = {"id":treeNode.id,"name":treeNode.name};
			/*  $.ajax({
		  		'type':'post',
		  		'url':"${path}/developer/fun/addOrModify",
		  		'data':data,
		  		'dataType':'json',
		  		'success':function(data,status){
		  			layer.alert('修改成功', {
						  icon: 1
						});
		  		}
		  	});   */
		}
		
		/*光标进入时，新增按钮的隐藏和显示  */
		 var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                console.log(treeNode.id);
                
                layer.prompt({title: '输入名称，并确认', formType: 2}, function(name, index){
                	  layer.close(index);
                	  layer.prompt({title: '输入url，并确认', formType: 2}, function(url, index){
                	    layer.close(index);
                	    layer.msg(name+ ";;" +url);
                	    zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:name,url:url});
                	    var data = {"name":name,"pId":treeNode.id||-1,"url":url};
        				$.ajax({
        		  		'type':'post',
        		  		'url':"${path}/developer/fun/addOrModify",
        		  		'data':data,
        		  		'dataType':'json',
        		  		'success':function(data,status){
        		  		//给数据库插一条，pid为当前id，的数据。
        	            //重新加载。。。
        		  			layer.alert('新增成功', {
        						  icon: 1
        						});
        		  			//createTree();
        		  		}
        		  		});
                	  });
                	});
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
		var className = "dark", curDragNodes, autoExpandNode;
		
		//停止拖动回调，获取id和pid进行数据的更新
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			//发送ajax请求更改数据,改变父id
			var data = {"id":treeNodes[0].id,"pId":treeNodes[0].pId||-1};//pid为null就是拖到了外面成了root级
			$.ajax({
		  		'type':'post',
		  		'url':"${path}/developer/fun/addOrModify",
		  		'data':data,
		  		'dataType':'json',
		  		'success':function(data,status){
		  			alert("修改成功!");
		  		}
		  	});
			className = (className === "dark" ? "":"dark");
		}
		$(document).ready(function(){
			createTree();
		});
	</SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
		<!-- <ul id="log" class="log"></ul> -->
	</div>
		<!--存id的隐藏标签  -->
		<input type="hidden" value="" id="id">
		<input  type="text"  value="" id="url" readonly="readonly"/>
	<!-- 	<input type="button" value="修改" onclick="update()"> -->
	</div>
	<script type="text/javascript">
	function update(){
		var id = $("#id").val();
		var url = $("#url").val();
		//发送ajax请求更新数据 更改url
		var data = {"id":id,"url":url};
			$.ajax({
		  		'type':'post',
		  		'url':"${path}/developer/fun/addOrModify",
		  		'data':data,
		  		'dataType':'json',
		  		'success':function(data,status){
		  			alert("功能地址修改成功!");
		  			createTree();
		  		}
		  	});
		//createTree();//重新加载
	}
	
	</script>
</BODY>
</HTML>